<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .out{
            width: 940px;
            height: 55px;
            margin: 0 auto;
            font-size: 20px;
            background-color:#AEBDCC;
            line-height: 55px;
            list-style: none;
        }
        a{
            display: block;
            cursor: pointer;
        }

        .plat{
            display: none;
            list-style:none;
            background-color: #444;
            width: 200px;
            height: inherit;
            position: absolute;
            top: 56px;

        }
        .plat li{
            list-style: none;
        }
        .plat li a{
            width: 200px;
            margin: 0 auto;
            text-align: center;
            color: lightgrey;
        }
        .nav{
            float: left;
        }
        .nav a{
            float: left;
            position: relative;
            display: block;
            margin-left: 40px;
            text-decoration: none;
            color: black;
        }
        .nav a:hover{
            color: #fafafa;
        }
        .plat li:hover>a{
            background-color: dimgrey;
        }
        .three{
            position: absolute;
            left: 201px;
            background-color: #444;
            display: none;
        }

        #frame-box{
            width: 100%;
            height: 32rem;
        }
        #frame-box iframe{
            width: 100%;
            height: 100%;
        }

    </style>
</head>
<body>
<div class="out">
    <ul class="nav">
        <a href="https://pages.mtu.edu/~whzhou/">About MILL</a>
        <ul class="plat">
            <li><a onclick=change_ifame("http://www.baidu.com")>Faculty</a></li>
            <li><a onclick=change_ifame("https://jx.tmall.com")>Students</a></li>
            <li><a href="#">Opportunities</a></li>
            <li><a href="#">About our lab</a></li>
        </ul>
    </ul>
    <ul class="nav">
        <a href="#">Search</a>
        <ul class="plat">
            <li class="third"><a href="#" class="third">Projects</a></li>
            <ul class="three">
                <li><a href="#">General</a></li>
                <li><a href="#">Heart&Vessels</a></li>
                <li><a href="#">Breast</a></li>
                <li><a href="#">Bone</a></li>
                <li><a href="#">Eye</a></li>
                <li><a href="#">Brain</a></li>
            </ul>
            </li>
            <li class="other"><a href="#">Grants</a></li>
            <li class="other"><a href="#">Collabortions</a></li>


        </ul>
    </ul>

    <ul class="nav">
        <a href="#">Software Products</a>
        <ul class="plat">
            <li><a href="#">All online Tools</a></li>
            <li><a href="#">Cardiovascular Imging</a></li>
            <li><a href="#">TAO</a></li>
            <li><a href="#">Intelligent segmentation</a></li>
            <li><a href="#">Download</a></li>
            <li><a href="#">File Management</a></li>
            <li><a href="#">Image Processing</a></li>
        </ul>
    </ul>

    <ul class="nav">
        <a href="#">Course and Training</a>
        <ul class="plat">
            <li class="third"><a href="#" class="third">Areificial Intelligence</a></li>
            <ul class="three">
                <li><a href="#">Machine Learning</a></li>
                <li><a href="#">Deep Learning</a></li>
            </ul>
            <li class="other"><a href="#">Image Processing</a></li>
            <li class="other"><a href="#">Python Programming</a></li>
        </ul>
    </ul>

    <ul class="nav">
        <a href="#">Other Resource</a>
    </ul>
</div>

<div id="frame-box">
    <iframe id="my-frame" src=""></iframe>
</div>

<script type="text/javascript">
    var third = document.getElementsByClassName("third");
    var three = document.getElementsByClassName("three");
    var nav = document.getElementsByClassName("nav");
    var other = document.getElementsByClassName("other");

    for(var i in third){
        third[i].onmouseover=triple_show;
    }
    for (var i in other){
        other[i].onmousemove=triple_hide;
    }
    function triple_show() {
        this.parentNode.children[1].style.display="block";
    }
    function triple_hide() {
        this.parentNode.children[1].style.display="none";

    }

    for(var i in nav){
        nav[i].onmouseover=plat_show;
        nav[i].onmouseout=plat_hide;
    }
    function plat_show() {
        this.getElementsByClassName("plat")[0].style.display="block";
    }
    function plat_hide() {
        this.getElementsByClassName("plat")[0].style.display="none";
    }


    function change_ifame(url) {
        var my_frame = document.getElementById("my-frame");
        my_frame.setAttribute("src", url);
    }
</script>
</body>
</html>
